<template>
    <header class="f12 row f16 white-bg rel">
        <div class="left row">
            <md-icon class="icon center" name="arrow-left" size="lg" v-back></md-icon>
        </div>
        <div class="col tc">
            <slot>
                {{title}}
            </slot>
        </div>
        <div class="right row">
            <slot name="right"></slot>
        </div>
    </header>
</template>

<script>
    export default {
        name: "BaseHeader",
        props: {
            title: String
        }
    };
</script>

<style lang="scss" scoped>
    $height:50px;
    header {
        box-shadow: 0 0 10px rgba(0,0,0,.15);
        background: white;
        height: $height;
        .left,.right {
            width: 30%;
            .icon {
                width: $height;
                height: $height;
            }
        }
    }
</style>
